<template>
  <div class="commit-wrap">
    <van-nav-bar
      title="商品评价"
      left-arrow
      @click-left="onClickLeft"
      right-text="发布"
      @click-right="onClickRight(commit)"
    />
    <div class="ye_wrap">
      <div class="ye_radius">
        <div class="order-details">
          <ul>
            <li v-for="item in order.list" :key="item.id">
              <van-image width="0.7rem" height="0.6rem" fit="cover" :src="item.imageUrl" />
              <div class="order-ctx">
                <div class="van-multi-ellipsis--l2">{{item.title}}</div>
                <span>数量{{item.num}}</span>
              </div>
            </li>
          </ul>
        </div>
        <div>
          <van-field name="rate" label="描述相符">
            <template #input>
              <van-rate v-model="commit.descriptionRate" />
            </template>
          </van-field>
          <van-field name="rate" label="物流服务">
            <template #input>
              <van-rate v-model="commit.deliveryRate" />
            </template>
          </van-field>
          <van-field name="rate" label="服务态度">
            <template #input>
              <van-rate v-model="commit.serviceRate" />
            </template>
          </van-field>
          <van-field
            v-model="commit.commitContent"
            rows="5"
            label="留言"
            type="textarea"
            maxlength="100"
            placeholder="从多个角度评价宝贝,可以帮助更多想买的人"
            show-word-limit
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrderById, addCommit, editOrder } from "@/api/order.js";

import Vue from "vue";
import { Field } from "vant";
import { Image as VanImage } from "vant";
import { Rate } from "vant";
import { Notify } from "vant";

Vue.use(Rate);
Vue.use(VanImage);
Vue.use(Field);
export default {
  data() {
    return {
      order: {},
      commit: {
        descriptionRate: 0,
        commitContent: "",
        deliveryRate: 0,
        serviceRate: 0
      }
    };
  },
  methods: {
    // 发布
    async onClickRight(commit) {
      commit.orderId = this.$route.query.id;
      let rs = await addCommit(commit);
      if (rs.status === 201) {
        this.receiptHandle(this.order);
        Notify({ type: "success", message: "评价成功!" });
      } else {
        Notify({ type: "danger", message: "评价失败请重试" });
      }
    },
    // 评价成功后修改订单状态
    async receiptHandle(order) {
      order.status = "5";
      let rs = await editOrder(order);
      this.$router.push("/order/0");
      // console.log(rs);
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    }
  },
  async created() {
    let orderId = this.$route.query.id;
    let rs = await getOrderById(orderId);
    this.order = rs.data;
    console.log(this.order);
  }
};
</script>

<style lang="stylus" scoped>
.commit-wrap {
  height: 100%;
  background-color: #f8f8f8;

  .ye_radius {
    padding: 0.1rem;

    .order-details {
      display: flex;
      margin-bottom: 0.15rem;
      li{
        margin-bottom 0.2rem
      }
      .van-image {
        margin-right: 0.1rem;
      }
      .order-ctx{
        display inline-block
      }
      .van-multi-ellipsis--l2 {
        font-weight: normal;
        font-size: 0.14rem;
        width 2.5rem
      }

      span {
        font-size: 0.12rem;
        color: #888;
      }
    }
  }
}

.van-nav-bar >>> .van-icon {
  color: #0f0f0f !important;
}
</style>